(function () {
  function DomFormat(opt) {
    this.el = opt && opt.el || document.getElementsByTagName('html')[0]; //建议直接获取html元素
    this.isShowProperty = opt && opt.isShowProperty || true; //是否显示属性信息
    this.isShowNodes = opt && opt.isShowNodes || true; //是否不判断nodeType true:只打印元素节点 false是所有节点
    this.render();
  }
  DomFormat.prototype = {
    genDomTree: function (oEle, list) {
      var items = oEle.childNodes,
        lists = list || '-' + oEle.nodeName.toLowerCase(),
        oNbsp = "\n";
      // 当前元素是html（el）元素的第几层子节点
      var func = function (el) {
        var count = 0,
          parent = el.parentNode;
        while (parent) {
          parent = parent.parentNode;
          count += 1;
        }
        return count;
      }
      for (var i = 0; i < func(oEle); i++) {
        oNbsp += '-------+';
      }
      oNbsp += ' ';
      for (let i = 0; i < items.length; i++) {
        if (this.isShowNodes) {
          if (this.isShowProperty) {
            if (items[i].nodeType == 1) {
              if (items[i].attributes.length) { //当前元素的属性
                var temp = oNbsp + items[i].nodeName.toLowerCase() + ':Property ';
                for (var j = 0; j < items[i].attributes.length; j++) {
                  temp += ' ' + (j + 1) + '. ' + items[i].attributes[j].name + '="' +
                    items[i].attributes[j].value + '"  ';
                }
                lists += this.genDomTree(items[i], temp);
              } else {
                lists += this.genDomTree(items[i], oNbsp + items[i].nodeName
                  .toLowerCase());
              }
            }
          } else {
            if (items[i].nodeType == 1) {
              lists += this.genDomTree(items[i], oNbsp + items[i].nodeName.toLowerCase());
            }
          }
        } else {
          if (this.isShowProperty) {
            if (items[i]?.attributes?.length) {
              let temp = oNbsp + items[i].nodeName.toLowerCase() + ':Property ';
              for (let j = 0; j < items[i].attributes.length; j++) {
                temp += ' ' + (j + 1) + '. ' + items[i].attributes[j].name + '="' +
                  items[i].attributes[j].value + '"  ';
              }
              lists += this.genDomTree(items[i], temp);
            } else {
              lists += this.genDomTree(items[i], oNbsp + items[i].nodeName
                .toLowerCase());
            }
          } else {
            lists += this.genDomTree(items[i], oNbsp + items[i].nodeName
              .toLowerCase());
          }
        }
      }
      oNbsp = "\n";
      return lists;
    },
    render: function () {
      let res = this.genDomTree(this.el);
      console.log(res);
    }
  }
  window.DomFormat = DomFormat;
})();

new window.DomFormat();